@layer base, starlight, rapide, theme, components, utilities;

@import "@astrojs/starlight-tailwind";
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

/* https://starlight.astro.build/guides/css-and-tailwind/#styling-starlight-with-tailwind */
@theme {
  --breakpoint-xs: 320px;
  --breakpoint-2xl: 1400px;

  --font-sans: "Geist", system-ui, sans-serif;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --text-md: 1rem;
  --leading-md: 1.5rem;

  --radius: 0.5rem;
  --radius-xl: calc(var(--radius) + 4px);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);

  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-accent-50: #fafeff;
  --color-accent-100: #f0fcff;
  --color-accent-200: #dcf8fe;
  --color-accent-300: #c8f4fe;
  --color-accent-400: #b4f0fd;
  --color-accent-500: #a0ecfd;
  --color-accent-600: #5fdfdc;
  --color-accent-700: #1ed2fa;
  --color-accent-800: #04acd2;
  --color-accent-900: #037791;
  --color-accent-950: #025c70;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 210 40% 98%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

:root {
  --sl-sidebar-width: 24rem;
  --sl-content-width: 48rem;
  --sl-text-h1: 1.8125rem;
  --sl-white: #f9f9f9;
  --sl-color-white: #f9f9f9;
  --bg-gray: #081215;
  --sl-color-black: #0d0d0d;
  --sl-color-accent: var(--colors-accent-500) !important;
  --sl-color-accent-high: var(--colors-accent-950) !important;
  --sl-color-bg-nav: unset;
}

:root[data-theme="light"] {
  --sl-color-accent: var(--color-accent-500) !important;
  --sl-accent-color: var(--color-accent-500) !important;
  --dark-blue: var(--color-accent-950);
  --sl-color-text-accent: var(--color-accent-700);
  --sl-color-accent-high: var(--color-accent-950) !important;
  --sl-color-white: var(--sl-color-gray);
  --sl-color-bg: var(--sl-white);
  --sl-color-black: var(--sl-white) !important;
  --sl-color-bg-sidebar: var(--sl-white);
  --sl-color-text: var(--sl-color-gray-1);
  --logo-text-color: #000000;
  --anchor-icon-filter: invert(0);
  --nav-selected-color: var(--color-accent-950);
}

:root[data-theme="dark"] {
  --sl-color-accent: var(--color-accent-500) !important;
  --sl-accent-color: var(--color-accent-500) !important;
  --sl-color-black: var(--color-neutral-900);
  --dark-blue: var(--color-accent-500);
  --sl-color-text-accent: var(--color-accent-500);
  --sl-color-accent-high: var(--color-accent-500) !important;
  --sl-color-white: var(--sl-white);
  --sl-color-bg: var(--bg-gray);
  --sl-rapide-ui-header-bg-color: var(--bg-gray) / 0.8;
  --sl-color-bg-sidebar: var(--bg-gray) / 0.8;
  --sl-color-text: var(--sl-white);
  --logo-text-color: #f9f9f9f9;
  --anchor-icon-filter: invert(1);
  --nav-selected-color: #374151;
  --ec-frm-edBg: #17191e !important;
}

.sidebar-pane a[aria-current="page"] {
  color: var(--sl-color-text-accent);
}

#sidebar-panel-0 > sl-sidebar-state-persist > ul > li:nth-child(1) > a {
  font-weight: 600;
  color: var(--sl-color-white);
  font-size: var(--sl-text-base);
}

.sidebar-content {
  height: 100%;
  min-height: max-content;
  padding: 0;
  flex-direction: column;
  gap: 1rem;
  & section {
    padding: 1rem var(--sl-sidebar-pad-x) 0;
  }
}

.tablist-wrapper {
  & ul {
    padding: 0;
    padding-top: 3px;
    margin-bottom: 5px;
  }
}

a[href="#sidebar-panel-0"],
a[href="#sidebar-panel-1"] {
  border: unset;
}

h1 a,
h2 a,
h3 a,
h4 a {
  color: var(--logo-text-color) !important;
}

.social-icons a {
  color: var(--logo-text-color);
}

.site-title {
  gap: 4px;
  color: white;
}

code[dir="auto"] {
  border-radius: 0.25rem;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a {
  text-decoration: none;
}

li a[aria-current="page"] {
  color: var(--nav-selected-color);
}
ul[data-astro-source-file$="@lorenzo_lewis/starlight-utils/components/NavLinks.astro"] {
  margin-left: 10px;
}

a[aria-current="true"]
  span[data-astro-source-file$="/starlight/components/TableOfContents/SidebarSublist.astro"] {
  color: var(--nav-selected-color);
}

figure figcaption span {
  letter-spacing: 0.02em !important;
}

/* controls line height of code snippets in docs */
.expressive-code figure pre code {
  line-height: 1.45rem;
}

.site-title span {
  color: var(--logo-text-color);
}

h1 > a {
  font-size: 2.5rem;
}

/* override because rapide is overridden by something */
.right-sidebar starlight-toc li > a {
  border-radius: 0;
  padding-inline-start: calc(1rem * var(--depth) + var(--pad-inline) + 0.35rem);
}
